<template>
	<!-- 分类 -->
	<view class="assort">
		<!-- 左侧导航栏 -->
		<view class="assort-left">
			<leftGroup :clableList="assorBarArr" @handleGoods="handleChildEvent"></leftGroup>
		</view>
		<!-- 右侧商品页 -->
		<view class="assort-right" :style="'height:'+assortHeight+'rpx;'">
			<goods style="width: 100%;" :goodsList="goodsList" cleaType="assort"></goods>
		</view>
	</view>
</template>

<script>
	import goods from "@/component/hot.vue"
	import leftGroup from "@/component/leftGroup.vue" //左侧导航栏组件
	import util from '@/component/commen/api/util.js'; //引入封装的请求 
	export default {
		components: {
			goods,
			leftGroup
		},
		data() {
			return {
				assortHeight: 0, //屏幕高度
				assorBarArr: [], ///左侧列表
				nowIndex: 0, //选中的索引
				scrollIntoIndex: "index0", //顶栏跟随的索引id
				goodsList: [], //商品列表
				orderItem: "", //点击进来的对应的数据信息
				dataInfo: [], //存储左侧导航栏以及右侧商品数据
			};
		},
		onLoad(e) {
			this.assorBarArr = JSON.parse(e.cateList)
			// console.log(JSON.parse(e.orderItem))
			this.orderItem = JSON.parse(e.orderItem)
			this.nowIndex = parseInt(e.index)
			this.scrollIntoIndex = "index" + e.index
		},
		mounted() {
			this.gethotData()
			let sysInfo = uni.getSystemInfoSync()
			let scaleFactor = 750 / sysInfo.windowWidth
			this.assortHeight = sysInfo.windowHeight * scaleFactor
		},
		methods: {
			gethotData() { //获取接口数据
				var params = {
					do: "goods",
					op: "cateList"
				}
				util.requestWithSign(params).then(res => {
					this.dataInfo = res.data
					this.goodsList = res.data.find(item => item.id == this.orderItem.id).children
				})
			},
			handleChildEvent(value) {
				console.log(value)
				this.goodsList = this.dataInfo.find(item => item.id == value.id).children
				console.log(this.goodsList)
			},
			onClick(e, data) { //点击左侧导航栏列表
				// console.log(e)
				if (this.nowIndex === e) {
					return;
				}
				this.nowIndex = e
				this.scrollIntoIndex = "index" + e
				// console.log("--------")
				// console.log(this.nowIndex)
				// console.log(this.scrollIntoIndex)
				//请求接口，返回右侧数据(得到返回数据后将数据保存到vuex)
				this.goodsList = this.dataInfo.find(item => item.id == data.id).children
				console.log(this.goodsList)
			}
		},
	}
</script>

<style lang="scss" scoped>
	.assort {
		display: flex;

		// 左侧导航
		.assort-left {
			width: 23%;

			// border: 1px solid #f00;
			.assort-scroll {
				font-size: 28rpx;
				text-align: center;
				box-sizing: border-box;
				// padding-top: 2vh;
				width: 100%;
				height: 100%;

				.assort-text {
					// border: 1px solid #f00;
					padding: 30rpx 0;
				}

				.assortindex {
					background: #fff;
					color: #4fc3a5;
				}
			}

		}

		// 右侧商品列表
		.assort-right {
			width: 100%;
			// width: 77%;
			background: #fff;
			// border: 1px solid #000;
			display: flex;
			flex-wrap: wrap;

		}
	}
</style>